import React, { Component } from 'react';

import { OrderDetailStyle } from './style';
import { OrderGoodsItem } from '@common/goodsItem';
import DocumentTitle from 'react-document-title';

import { store } from '@store';
import { tbaBankPay } from '@api/submit'
import { handelDjOrder } from '@api/order'
import request from '@service';

import { getTime, mixRoute } from '@/utils'
import { Toast, Modal } from 'antd-mobile';

const alert = Modal.alert

const GroupAddress = (props) => {
  const { address } = props

  return (
    <div className="orderDetailAddress common-cards">
      <div className="flex-column">
        <p className="addressTop">
          <span
            style={{ fontSize: '.4rem', fontWeight: 'bold' }}
          >实际到货地址</span>
        </p>

        <p className="addressInfo">{address.address}</p>
      </div>
    </div>
  )
}

const Address = (props) => {

  const { address } = props

  return (
    <div className="orderDetailAddress common-cards">
      <div className="flex-column">
        <p className="addressTop">
          <img src='https://res.lexiangpingou.cn/images/vip/orderdw.png' alt="" />
          <span>收货地址</span>
        </p>
        <p className="addressName"> {address.name} <span
          className="addressPhone">{address.phone}</span></p>
        <p className="addressInfo">{address.address}</p>
      </div>
    </div>
  )
}

const PriceDetail = (props) => {

  const { priceList, status } = props

  return (
    <div className="orderDetailAmount common-cards">
      {
        priceList.map((item, key) => {
          return (
            <div key={key + item.name} className='doog' >
              <p>{item.name}</p>
              <p>
                <span style={item.name === '实付金额' ? { color: '#ff762e' } : {}}>
                  {item.name === '实付金额' &&
                    <span style={{ fontSize: '.24rem', color: '#474747', opacity: '.5' }}>

                      {(status === '-1' || status === '1') && '(不含运费)'}

                    </span>}


                  {item.name === '支付保证金' ? '-' : ''}￥{item.price ? item.price : '0.00'}

                </span>
              </p>
            </div>
          )
        })
      }
    </div>
  )
}

const OrderStatus = (props) => {

  const { status, groupstatus } = props

  return (
    <div className="detailGoodsStatus common-cards flex-column">
      <div className="">
        <p className="statusText">
          {
            (status === '-1') && <span>待付款</span>
          }
          {
            (status === '1' && groupstatus === '2') && <span> 拼单成功 </span>
          }
          {
            (status === '1' && groupstatus === '1') && <span> 拼单失败 </span>
          }
          {
            (status === '1' && groupstatus === '3') && <span> 待分享 </span>
          }
          {
            (status === '2') && <span>拼车中</span>
          }
          {
            (status === '3') && <span>拼车中</span>
          }
          {
            (status === '4') && <span>拼车成功</span>
          }
          {
            (status === '5') && <span>拼车失败</span>
          }
          {
            (status === '11') && <span>已取消</span>
          }
          {
            (status === '10') && <span>已退款</span>
          }
        </p>
        <p className="statusAction">
          {
            (status === '-1') && <span> 保证金订单已创建, 请支付 </span>
          }
          {
            (status === '1' && groupstatus === '3') && <span> 订单已提交 快喊小伙伴一起加入 </span>
          }
          {
            (status === '1' && groupstatus === '2') && <span> 拼单成功 等待装车发货 </span>
          }
          {
            (status === '1' && groupstatus === '1') && <span> 拼单失败了 </span>
          }
          {
            (status === '2') && <span> 平台已为您择优匹配到拼友，请立即支付尾款 </span>
          }
          {
            (status === '3') && <span> 尾款已支付成功，等待其他拼友付款 </span>
          }

          {
            (status === '4') && <span> 等待供应商发货 </span>
          }

          {
            (status === '11') && <span> 订单已取消 </span>
          }
          {
            (status === '10') && <span> 请注意信息通知 </span>
          }
        </p>
      </div>
    </div>
  )
}

class OrderDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      goodsInfo: [],
      showService: false,
      time: '45787',
      orderDetail: {}
    }
  }


  componentDidMount() {
    let caigouOrderId = this.props.match.params.caigouOrderId
    let getCaigouOrderDetail = {
      data: {
        action: 'order_detail',
        id: caigouOrderId
      }
    }

    request(getCaigouOrderDetail).then(res => {

      if (res.status === 200) {
        this.setState({
          orderDetail: res.data
        })
      } else {
        console.log('数据请求失败')
      }

    })
  }


  render() {

    const { orderDetail } = this.state
    const { status, groupstatus } = orderDetail
    return (
      <>
        <DocumentTitle title={this.props.route.title} />
        <OrderDetailStyle>

          {orderDetail.priceList &&
            <div className="orderDetail">
              <OrderStatus status={orderDetail.status} groupstatus={orderDetail.groupstatus} />

              <div className="orderDetailGoods common-cards">
                <OrderGoodsItem goods={orderDetail.good} />
              </div>

              {orderDetail.groupstatus === null && <Address address={orderDetail.address} />}
              {orderDetail.groupstatus !== null && <GroupAddress address={orderDetail.address} />}


              <PriceDetail priceList={orderDetail.priceList} status={orderDetail.status} />

              <div className="orderDetailOrderNumber common-cards">
                <div>
                  <p>保证金编号 <span>{orderDetail.deposit_orderno}</span></p>
                  <p>创建时间 <span>{getTime(orderDetail.deposit_createtime)}</span></p>
                  {orderDetail.deposit_paytime !== '0' && <p>付款时间 <span>{getTime(orderDetail.deposit_paytime)}</span></p>}
                  {/* {orderDetail.status === '5' && <p>取消时间 <span>{orderDetail.receive_time}</span></p>} */}
                  {orderDetail.platform_refund_time.length > 2 && <p>退款时间 <span>{getTime(orderDetail.platform_refund_time)}</span></p>}


                </div>
              </div>
            </div>
          }

          <div className="order-detail-option flex-row global-bottom-fixed">


            {orderDetail.status === '-1' && <button className="gopay" onClick={e => { this.payDeposit(orderDetail.sfje, orderDetail.deposit_orderno,) }}> 支付保证金 </button>}
            {orderDetail.status === '-1' && <button className="gopay" onClick={e => { this.cancel(orderDetail.deposit_orderno) }} > 取消 </button>}
            {orderDetail.status === '2' && <button className="gopay" onClick={e => {
              this.payBalance(orderDetail.sfje, orderDetail.orderno, orderDetail.tuan_id)
            }}> 支付尾款 </button>}

            <button className="gopay" onClick={e => {

              mixRoute(this.props.history, '/')
             
              // this.props.history.push('/')

            }}> 返回首页 </button>
            {(status === '1' && groupstatus === '3') && <button className="gopay" onClick={e => { this.invitePartners(orderDetail.tuan_id) }} > 邀请小伙伴 </button>}

          </div>

        </OrderDetailStyle>
      </>
    );
  }

  invitePartners(tuanid) {
    // 邀请小伙伴 小程序扫码
    this.props.history.push('/sharegroup/' + tuanid)
  }

  payBalance(price, orderno, tuanid) {

    let weikuan = {
      orderno,
      price,
      uniacid: store.getState().appConfig.uniacid,
      tuan_id: tuanid
    }

    tbaBankPay(weikuan)

  }

  payDeposit(price, orderno) {

    let params = {
      price,
      orderno,
      uniacid: store.getState().appConfig.uniacid
    }

    tbaBankPay(params)

  }


  cancel(djno) {
    let params = {
      action: 'cancel_djorder',
      deposit_orderno: djno
    }


    alert('确定要取消订单吗？', '', [
      {
        text: '取消', onPress: () => {
          console.log(params)
        }
      },
      {
        text: '确认', onPress: () => {
          handelDjOrder(params).then(res => { if (res.status === 200) { Toast.success(res.msg); window.location.reload() } else { Toast.fail(res.msg) } })
        }
      },
    ])

  }

  changeTime = _ => {
    let { countdown } = this.state
    countdown -= 1
    let h = parseInt(countdown / 3600)
    let m = parseInt(countdown / 60 % 60)
    let s = parseInt(countdown % 60)
    this.setState({
      time: `${h}:${m}:${s}`,
      countdown
    })
  }

  componentWillUnmount = () => {
    // clearInterval(this.timer)
  }

  goPay = order => {
    if (order.tuan_id === '0') {
      this.props.history.replace(`/pay/1/${order.orderno}/${order.id}`)
    } else {
      this.props.history.replace(`/pay/2/${order.orderno}/${order.id}`)
    }
  }

}

export default OrderDetail;